<template>
    <div class="comment-post">
      <van-field
        class="post-field"
        v-model.trim="message"
        rows="2"
        autosize
        type="textarea"
        maxlength="50"
        placeholder="请输入留言"
        show-word-limit
      />
      <van-button
        class="post-btn"
        @click="onPostComment"
        :disabled="!message.length"
      >发布</van-button>
    </div>
  </template>
  
  <script>
  import {addComment} from '@/api/comment'
  export default {
    name: 'CommentPost',
    components: {},
    props: {
        target:{
            type:[Number,String,Object],
            required:true
        }
    },
    inject:['articleID'],
    data () {
      return {
        message: ''
      }
    },
    computed: {},
    watch: {},
    created () {},
    mounted () {},
    methods: {
        async onPostComment(){
            this.$toast.loading({
                message: '发布中...',
                forbidClick: true, //禁用背景被点击
                duration:0 //持续时间默认2秒，如果为0则持续展示
             })
            try{
               const {data} = await addComment({
                target:this.target.toString(), //文章ID
                content: this.message, //评论内容
                art_id:this.articleID ? this.articleID.toString() : this.articleID, //文章id，对评论内容发表回复时，需要传递此参数，表明所属文章id。对文章进行评论，不要传此参数
               })

               //清空文本框
               this.message=''
               this.$emit('pl_success',data.data)
               this.$toast.success('发布成功')
            }catch(err){
                this.$toast.fail('发布失败')
            }
        }
    }
  }
  </script>
  
  <style scoped lang="less">
  .comment-post {
    display: flex;
    align-items: center;
    padding: 32px 0 32px 32px;
    .post-field {
      background-color: #f5f7f9;
    }
    .post-btn {
      width: 150px;
      border: none;
      padding: 0;
      color: #6ba3d8;
      &::before {
        display: none;
      }
    }
  }
  </style>
  